<template>
  <div class="about">
    <!-- <h1>{{counter}}</h1> -->
    <!-- <h1>翻倍{{this.$store.state.counter * 2}}</h1> -->
    <!-- <h1>翻倍{{this.$store.getters.mul}}</h1> -->
    <!-- <h1>{{this.$store.state.counter}}</h1> -->
    <!-- <h3>{{this.$store.state.name}}</h3> -->
    <!-- <h3>{{testName}}</h3> -->
    <!-- <h1>翻倍{{testMul}}</h1> -->
    <!-- <h1>{{testCounter}}</h1> -->
    <hr />
    <h3>{{name}}</h3>
    <h1>翻倍{{mul}}</h1>
    <h1>{{counter}}</h1>
    <button @click="add">++</button>
    <button @click="decr">--</button>
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        // counter: 0
      }
    },
    computed: {
      //-------------自定义------------------------
      /* testCounter() {
        return this.$store.state.counter
      }, */
     /* testName() {
        return this.$store.state.name
      }, */
      // testMul() {
      //   return this.$store.getters.mul
      // },
      //-------------通过mapState生成计算属性,从state中获取数据---(对象方式)---------------------
      // ...mapState({testCounter: 'counter',testName:'name'})
      //-------------通过mapState生成计算属性,从state中获取数据---(数组方式)---------------------
      ...mapState(['counter','name']),
      //-------------通过mapGetters生成计算属性,从getters中获取数据---(对象方式)---------------------
      // ...mapGetters({testMul:'mul'})
      //-------------通过mapGetters生成计算属性,从getters中获取数据---(数组方式)---------------------
      ...mapGetters(['mul'])
    },
    mounted() {
      // {testCounter:f,abc:f}
      // console.log(mapState({testCounter:'counter',abc:'yyy'}))
    },
    methods: {
      add() {
        // this.counter++;
        // this.$store.state.counter++;
        // this.$store.dispatch('jiaA')
        this.$store.commit('jiaM');
      },
      decr() {
        /*
          参数1:actions中的方法名
          参数2:普通参数

        */
        this.$store.dispatch('jianA', 2)
      }
    }
  }
</script>
